<template>
  <div class="app-container">
    <el-row>
      <el-col :span=3 >
        <el-table :data="bellowsDataList" ref="fileTable" highlight-current-row>
          <el-table-column label="风箱" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="drawBellowsData(scope.row)"
              >{{scope.row.bellowNo}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="21">
        <el-form :model="queryParams" ref="queryForm" :inline="true" >
          <el-form-item label="时间范围" prop="searchDateRange">
            <el-date-picker clearable size="small"
                            @change="drawBellowsDataChart"
                            v-model="queryParams.searchDateRange"
                            type="datetimerange"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="drawBellowsDataChart">搜索</el-button>
          </el-form-item>
        </el-form>
        <div ref="bellowsDataChart" style="width: 100%;height: 600px"></div>
        <div style="text-align: center;font-size: 18px">{{echartsTitle}}</div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  import { listBellows,getBellowDataDialog } from "@/api/app/stock//bellows";
  import {getHisChart,getRealDataByTags} from '@/api/app/plc/cache'
  export default {
    components: {
    },
    data() {
      return {
        echartsTitle: null,
        bellowId: null,
        bellowsDataList: [],
        bellowsData:{},

        queryParams: {
          searchDateRange: [this.moment().subtract('hours', 24).format('YYYY-MM-DD HH:mm:ss'), this.moment().format('YYYY-MM-DD HH:mm:ss')],
        },
      }
    },
    created () {
      this.getBellowsDataList()
    },
    methods: {
      getBellowsDataList() {
        listBellows().then(response => {
          this.bellowsDataList = response.data.rows;
          this.$refs.fileTable.setCurrentRow(this.bellowsDataList[0])
          this.bellowsData = this.bellowsDataList[0]
          this.drawBellowsDataChart()
        })
      },

      drawBellowsData(row){
        this.bellowsData  =row
        this.drawBellowsDataChart()
      },


      drawBellowsDataChart(){
        if (this.queryParams.searchDateRange) {
          let data = {
            timeTag: 1,
            codes:this.bellowsData.pressurecA+","+this.bellowsData.pressurecB+","+this.bellowsData.temperatureCA+","+this.bellowsData.temperaturecB,
            startDt: this.queryParams.searchDateRange[0],
            endDt: this.queryParams.searchDateRange[1]
          }
          let colorList = ['#fc8251', '#5470c6', '#9A60B4', '#ef6567', '#f9c956', '#AA069F', '#FD0100', '#FC7D02', '#93CE07']
          getHisChart(data).then(response => {
            this.$nextTick(() => {
              let eList = response.data
              let series = []
              let list1=[],list2=[],list3=[],list4=[],nameList =[],xdata =[]
              //第一条数据
              nameList.push(eList[0].name)
              for(let a = 0;a<eList[0].list.length;a++){
                list1.push(eList[0].list[a].value)
                xdata.push(eList[0].list[a].dt)
              }
              //第二条数据
              nameList.push(eList[1].name)
              for(let b = 0;b<eList[1].list.length;b++){
                list2.push(eList[1].list[b].value)
              }
              //第三条数据
              nameList.push(eList[2].name)
              for(let c = 0;c<eList[2].list.length;c++){
                list3.push(eList[2].list[c].value)
              }
              //第四条数据
              nameList.push(eList[3].name)
              for(let d = 0;d<eList[3].list.length;d++){
                list4.push(eList[3].list[d].value)
              }
              series.push({showSymbol: false,yAxisIndex:1, name: nameList[0], data: list1, type: 'line', smooth: true, itemStyle: {color:colorList[0]}})
              series.push({showSymbol: false,yAxisIndex:1, name: nameList[1], data: list2, type: 'line', smooth: true,itemStyle: {color:colorList[1]}})
              series.push({showSymbol: false,yAxisIndex:0, name: nameList[2], data: list3, type: 'line', smooth: true,itemStyle: {color:colorList[2]}})
              series.push({showSymbol: false,yAxisIndex:0, name: nameList[3], data: list4, type: 'line', smooth: true,itemStyle: {color:colorList[3]}})

              let chart = echarts.init(this.$refs.bellowsDataChart,'light')
              let option ={
                /** 保存echart图片 **/
                toolbox: {
                  show: true,
                  feature: {
                    saveAsImage: {
                      show: true,
                      excludeComponents: ['toolbox'],
                      pixelRatio: 2
                    }
                  }
                },
                grid: {
                  left: 60,
                  right: 60,
                  bottom: 20,
                  containLabel: true
                },
                "backgroundColor": "rgba(0, 0, 0, 0)",
                dataZoom: {
                  type: 'inside',
                  zoomOnMouseWheel: true,
                },
                xAxis: {
                  type: 'category',
                  data:xdata,
                },
                yAxis: [{
                  name: '风箱废气温度，℃',
                  type: 'value',
                  splitLine: {
                    lineStyle: {
                      type: 'dotted',
                      //color: ['#aaa', '#ddd']
                    }
                  },
                  axisLabel: {
                    textStyle: {
                      color: '#000'
                    },
                  },
                  min: function (val) {
                    return parseInt(val.min - 20)
                  },
                  max: function (val) {
                    return parseInt(val.max + 20)
                  },
                },
                  {
                    name: '风箱负压，KPa',
                    type: 'value',
                    splitLine: {
                      lineStyle: {
                        type: 'dotted',
                        color: ['#aaa', '#ddd']
                      }
                    },
                    axisLabel: {
                      textStyle: {
                        color: '#000'
                      },
                    },
                    min: function (val) {
                      return parseInt(val.min - 20)
                    },
                    max: function (val) {
                      return parseInt(val.max + 20)
                    }
                  }],
                tooltip: {
                  trigger: 'axis', //设置tip提示
                  axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                legend: {
                  left: 'center',
                },
                series: series
              }
              chart.setOption(option, true)
            })
          })
        }
      },


    }
  }
</script>
<style lang="scss" scoped>
  .mix-check td {
    padding: 8px 0;
  }
  .table td{
    text-align:center;
    vertical-align:middle;
    font-size: 9px;
  }
  ::v-deep .el-table--medium {
    th,td{
      padding: 3px 0;
    }
  }
</style>
